import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import RNExitApp from 'react-native-exit-app'

import styles from './styles'

const AgreePop = props => {
  const navigation = useNavigation()
  const { onAgree, onReject } = props

  const _onAgree = () => {
    onAgree && onAgree()
  }

  const _onCancel = () => {
    RNExitApp.exitApp()
    onReject && onReject()
  }

  const _openUrl = (url, title) => {
    navigation.navigate('Webview', {
      url: url,
      title: title
    })
  }

  return (
    <View style={styles.wrap}>
      <View style={styles.mask} />
      <View style={styles.popMain}>
        <View style={styles.popTitle}><Text style={styles.titleText}>服务协议和隐私政策</Text></View>
        <View style={styles.popBody}>
            <ScrollView
              style={styles.container}
              contentInsetAdjustmentBehavior="automatic"
            >
              <View>
                <Text style={styles.bodyText}>    请您务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了向你提供即时资讯、内容分享等服务，我们需要收集你的设备信息、操作日志等个人信息。您可以在我的-系统设置管理授权。</Text>
                <Text style={styles.bodyText}>    您可以阅读
                  <Text style={styles.linkText} onPress={() => _openUrl('https://wap.sctynews.cn/#/clause', '服务协议')}>《服务协议》</Text>
                  <Text style={styles.bodyText}>和</Text>
                  <Text  style={styles.linkText} onPress={() => _openUrl('https://wap.sctynews.cn/#/privacy', '隐私政策')}>《隐私政策》</Text>
                  <Text style={styles.bodyText}>了解详细信息，如您同意，请点击同意开始接受我们的服务。</Text>
                </Text>
              </View>
            </ScrollView>
        </View>
        <View style={styles.popFooter}>
          <TouchableOpacity onPress={_onCancel} style={styles.btnWrap}>
            <View style={styles.popBtn}><Text style={styles.cancelText}>暂不使用</Text></View>
          </TouchableOpacity>
          <TouchableOpacity onPress={_onAgree} style={styles.btnWrap}>
            <View style={styles.popBtn}><Text style={styles.submitText}>同意</Text></View>
          </TouchableOpacity>          
        </View>
      </View>
    </View>
  )
}

export default AgreePop